{% extends "base.html" %}

{% block stylesheet %}
<link rel="stylesheet" href="{{static_url('css/bootstrap-markdown.min.css')}}" type="text/css">
{% end block %}

{% block meta %}
    <meta name="menu-tag" content="31"/>
{% end block %}

{% block main %}
<div class="container">
    <ol class="breadcrumb">
        <li><a href="/lab_courses">所有课程</a></li>
        <li><a href="/lab_course/{{lab['courseid']}}">{{lab['coursename']}}</a></li>
        <li class="active">{{lab['labname']}}</li>
    </ol>
    <div class="row">
        <form class="form-horizontal">
            <caption>
                <h3 class="text-center">{{lab['labname']}}</h3>
            </caption>
            <div class="form-group">
                <label class="control-label col-md-2">所属课程章节</label>
                <div class="col-md-10 form-control-static">
                    {{lab['coursename']}}-{{lab['chaptername']}}
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">编号</label>
                <div class="col-md-10 form-control-static">
                    {{lab['code']}}
                </div>
            </div>
            <div class="form-group" >
                <label class="control-label col-md-2">实验指导书</label>
                <div class="col-md-10">
                    <div name="content" data-provider="markdown-preview" 
                        data-iconlibrary="fa" id="markdown_content"></div>
                    <br/>
                    <div>
                        <button type="button" class="btn btn-default btn-warning" id="btnUpdateGuides">更新实验指导书</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">已上传的实验资源包</label>
                <div class="col-md-10">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>文件名</th>
                                <th>路径</th>
                            </tr>
                        </thead>
                        <tbody id="table_files" data-bind="foreach:$data">
                            <tr>
                                <td><b data-bind="text:name"></b></td>
                                <td><span data-bind="text:path"></span></td>
                            </tr>
                        </tbody>
                    </table>    
                    
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">更新实验资源包</label>
                <div class="col-md-10">
                    <table class="table table-striped">
                        <tr>
                            <td>
                                <input type="file" id="labresource" accept="application/zip" class="form-control">
                            </td>
                        </tr>
                        <tr>
                            <td>指定资源包主实验文件名称：
                                <input type="text" id="txtlabfile" class="form-control" placeholder="例如：mainlabfile.ipynb">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-default btn-warning" id="btnUpdateResource">更新资源包(包括主实验文件名)</button>
                            </td>
                        </tr>
                    </table>    
                    
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2">
                    <button type="button" class="btn btn-default" onclick="goBack();">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 对话框开始 -->

<!-- 对话框结束 -->

{% end block %}


{% block script %}
<script src="{{static_url('js/bootstrap-markdown.js') }}" type="text/javascript"></script>
<script src="{{static_url('js/bootstrap-markdown.zh.js') }}" type="text/javascript"></script>
<script src="{{static_url('js/markdown.js') }}"></script>
<script src="{{static_url('js/to-markdown.js') }}"></script>

<script type="text/javascript">
    var labid = {{lab['labid']}};
    var code = '{{lab['code']}}';
    var courseid = {{lab['courseid']}};
    var content = "";

    function file(name, path){
        var self = this;
        self.name = name;
        self.path = path;
    }

    function goBack(){
        window.location.href = '/lab_course/' + courseid;
    }

    $(document).ready(function(){
        $.getJSON('/lab_getlabcontent?id=' + labid, function(result){
            $("#markdown_content").markdown({
                language: 'zh',
                height: '400',
                onShow: function(e){
                    var text = result.guides;
                    // text = text.replace(/\\n\\r/g, "\n\r");
                    e.setContent(text);
                },
                onBlur: function(e){
                    content = e.getContent().replace(/\n\n/g, "\\n\\r");
                }
            });
        });

        files = ko.observableArray();
        $.getJSON('/lab_getlabresource?code=' + code, function(results){
            var arr = [];
            for(var i=0;i<results.files.length;i++){
                item = results.files[i];
                arr.push(new file(item.name, item.path))
            }
            files(arr);
            ko.applyBindings(files, document.getElementById("table_files"));
            $("#btnDownloadResource").attr("disabled", arr.length == 0);
            $("#txtlabfile").val(results.labfile);
        });

        $("#btnUpdateGuides").click(function(){
            data = {'labid': labid, 'guides': content};
            $.ajax({
                url : '/lab_updatelabcontent',
                type : 'put',
                data : JSON.stringify(data),
                dataType: 'json',
                success: function(result){
                    if(result.code == 'success'){
                        bootbox.alert('更新实验指导成功！');
                    } else{
                        bootbox.alert(result.message);
                    }
                }
            });
        });

        $("#btnDownloadResource").click(function(){
            url = '/lab_downloadlabresource';
            var form = $("<form></form>").attr("action", url).attr("method", "get");
            form.append($("<input></input>").attr("type", "hidden").attr("name", "code").attr("value", code));
            form.appendTo('body').submit().remove();
        });

        $("#btnUpdateResource").click(function(){
            var labfile = $("#txtlabfile").val();
            if (!labfile){
                bootbox.alert('必须指定实验主文件名');
                return;
            }
            var ele = document.getElementById("labresource")

            fileObj = ele.files[0];
            var form = new FormData();
            form.append("labfile", labfile)
            form.append("resource_file", fileObj);

            $.ajax({
                url:'/lab_uploadlabresource?code=' + code,
                type:"post",
                data:form,
                dataType:'json',
                processData:false,
                contentType:false,
                success:function(result){
                    if(result.code == 'success'){
                        bootbox.alert("更新资源成功", function(){
                            window.location.reload(); 
                        });
                    } else{
                        bootbox.alert(result.message);
                    }
                }
            });
        });
    });
</script>
{% end block %}
